<!-- components/templete/main -->
<template>
  <div class="contentTpl">
    <div class="title">
      <van-sticky>
        <van-nav-bar
          :border="false"
          :title="title"
          left-arrow
          @click-left="goBack"
        />
      </van-sticky>
    </div>
    <div class="box">
      <div class="shadow-box">
        <slot name="pannelContent"></slot>
      </div>
    </div>
    <slot name="otherContent"></slot>
  </div>
</template>
<script>
export default {
  name: 'tContent',
  props: ['title'],
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.contentTpl {
  min-height: 100vh;
  position: relative;
  padding-bottom: 40px;
  .title {
    height: 110px;
    background: @main-color;
  }
  .box {
    z-index: 2;
    position: relative;
    top: -45px;
    padding: @padding-md;
    .shadow-box {
      overflow: hidden;
      background: #fff;
      border-radius: @border-radius-md;
      box-shadow: 0 4px 16px rgba(125, 126, 128, 0.06);
    }
  }
}
</style>
